<template>
    <div class='quality-sensor'>
        <el-card body-style="padding: 5px;" class="top">
            <div class="top-title">
                <img :src="imageAarray[type].imageUrl1" style="width: 20px; height: 20px;">
                <span>{{ name }}</span>
            </div>
            <div class="top-main" @click="GetSensorDataLatest()">
                <p v-if="value" :class="levelColor">{{ level }}</p>
                <p v-else>Null</p>
            </div>
        </el-card>
        <el-card body-style="padding: 15px;" class="bottom">
            <div class="bottom-main">
                <el-card body-style="padding: 0px;" class="bottom-circle" shadow="hover">
                    <img :src="imageAarray[type].imageUrl2" style="width: 40px; height: 40px;">
                </el-card>
                <div class="bottom-text" @click="GetSensorDataLatest()">
                    <p v-if="value" :class="[levelColor, valueChangeIndicator]">{{ value }} {{ unit }}</p>
                    <p v-else>Null</p>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'QualitySensor',
    components: {},
    props: {
        type: {
            type: Number,
            required: true
        },
        name: {
            type: String,
            required: true
        },
        url: {
            type: String,
            required: true
        }
    },
    data() {
        return {
            intervalId: null,
            prevValue: null,
            value: null,
            kind: null,
            imageAarray: [
                {
                    imageUrl1: require('../assets/dot1.png'),
                    imageUrl2: require('../assets/air.svg'),
                },
                {
                    imageUrl1: require('../assets/dot2.png'),
                    imageUrl2: require('../assets/temp.svg'),
                },
                {
                    imageUrl1: require('../assets/dot3.png'),
                    imageUrl2: require('../assets/water.svg'),
                }
            ],
        };
    },
    computed: {
        unit() {
            if (this.type === 0) {
                return 'AQI';
            } else if (this.type === 1) {
                return '°C';
            } else if (this.type === 2) {
                return '%';
            } else {
                return '';
            }
        },
        level() {
            if (this.type === 0) {
                if (this.value < 50) {
                    return 'Healthy';
                } else if (this.value >= 50 && this.value < 100) {
                    return 'Moderate';
                } else if (this.value >= 100 && this.value < 300) {
                    return 'Unhealthy';
                } else {
                    return 'Hazardous';
                }
            } else if (this.type === 1) {
                if (this.value < 5) {
                    return 'Cold';
                } else if (this.value >= 5 && this.value < 15) {
                    return 'Cosy';
                } else if (this.value >= 15 && this.value < 30) {
                    return 'Warm';
                } else {
                    return 'Hot';
                }
            } else {
                if (this.value < 30) {
                    return 'Dry';
                } else if (this.value >= 30 && this.value < 60) {
                    return 'Moderate';
                } else if (this.value >= 60 && this.value <= 80) {
                    return 'Damp';
                } else {
                    return 'Moist';
                }
            }
        },
        levelColor() {
            if (this.type === 0) {
                if (this.value < 50) {
                    return 'color-type1';
                } else if (this.value >= 50 && this.value < 100) {
                    return 'color-type2';
                } else if (this.value >= 100 && this.value < 300) {
                    return 'color-type3';
                } else {
                    return 'color-type6';
                }
            } else if (this.type === 1) {
                if (this.value < 5) {
                    return 'color-type5';
                } else if (this.value >= 5 && this.value < 15) {
                    return 'color-type2';
                } else if (this.value >= 15 && this.value < 30) {
                    return 'color-type3';
                } else {
                    return 'color-type4';
                }
            } else {
                if (this.value < 30) {
                    return 'color-type3';
                } else if (this.value >= 30 && this.value < 60) {
                    return 'color-type1';
                } else if (this.value >= 60 && this.value <= 80) {
                    return 'color-type2';
                } else {
                    return 'color-type5';
                }
            }
        },
        valueChangeIndicator() {
            if (this.prevValue === null || this.value === null) {
                return '';
            }
            if (this.value > this.prevValue) {
                return 'value-increase';
            } else if (this.value < this.prevValue) {
                return 'value-decrease';
            } else {
                return '';
            }
        },
    },
    methods: {
        GetSensorDataLatest() {
            this.$http.get(`${this.url}`)
                .then(response => {
                    const responseData = response.data;
                    if (responseData.errcode === 0) {
                        this.prevValue = this.value;
                        this.value = Math.round(responseData.data.value);
                        console.log(this.value);
                    }
                })
                .catch(error => {
                    error;
                });
        }
    },
    mounted() {
        this.GetSensorDataLatest();
        this.intervalId = setInterval(this.GetSensorDataLatest, 5 * 60 * 1000);
    },
    beforeDestroy() {
        clearInterval(this.intervalId);
    },
}
</script>

<style scoped>
.quality-sensor {
    height: 100%;
}

.el-card {
    box-shadow: 0 0 10px rgba(155, 153, 153, 0.5);
}

.top {
    margin-bottom: 20px;
}

.top-title {
    display: flex;
    align-items: center;
    color: black;
    font-size: 12px;
    font-weight: bold;
}

.top-main,
.bottom-text {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.top-main p,
.bottom-text p {
    font-size: 20px;
    font-weight: bold;
    margin: 15px 0;
}

.top-main p:hover,
.bottom-text p:hover {
    background-color: rgb(239, 239, 239);
    color: rgb(0, 0, 0);
    box-shadow: 0 0 15px rgba(225, 220, 220, 0.7);
}

.bottom-main {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bottom-circle {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    border-radius: 30px;
}

.value-increase::after {
    content: '↑';
    color: green;
    margin-left: 5px;
}

.value-decrease::after {
    content: '↓';
    color: red;
    margin-left: 5px;
}

.color-type1 {
    color: #1EA20A;
}

.color-type2 {
    color: #04AACC;
}

.color-type3 {
    color: #D79414;
}

.color-type4 {
    color: #BE2B2B;
}

.color-type5 {
    color: #1431D7;
}

.color-type6 {
    color: #3F4149;
}
</style>